<template>
	<table-layout
		:header-cell-style="{ color: '#000', background: '#F5F7FA' }"
		height="calc(100vh - 520px)"
		:query-form="props.queryForm"
		:fetch-list="wmsInventoryBatchLog"
		ref="dataTableRef"
		:createdIsNeed="false"
	>
		<!-- :fetch-list="wmsInventoryBatchLog" -->
		<template v-slot:tableLayout>
			<el-table-column
				:show-overflow-tooltip="true"
				v-for="(col, ind) in thList"
				:key="ind"
				:label="col.name"
				:prop="col.prop"
				:min-width="col.width ? col.width : '140'"
			>
				<template v-slot="scope">
					<div v-if="scope.row[col.prop]?.split(',').length === 3" style="display: inline-flex; align-items: center; gap: 2px">
						<span style="display: inline-flex; align-items: center; gap: 2px">
							<el-icon style="color: #f56c6c; font-weight: 900" v-if="Number(scope.row[col.prop]?.split(',')[0]) > 0"><Top /> </el-icon>
							<el-icon style="color: #67c23a" v-if="Number(scope.row[col.prop]?.split(',')[0]) < 0"><Bottom /> </el-icon>
							<span>{{ Math.abs(scope.row[col.prop]?.split(',')[0]) }} | </span>
							&nbsp;
						</span>
						<span>{{ scope.row[col.prop]?.split(',')[1] }} - {{ scope.row[col.prop]?.split(',')[2] }}</span>
					</div>
					<template v-else-if="col.name === '业务类型'">
						<template v-for="item in props.busTypesList">
							<span v-if="item.code === scope.row[col.prop]" :key="item.code">
								{{ item.name }}
							</span>
						</template>
					</template>
					<template v-else-if="col.name === '出入库类型'">
						{{ scope.row[col.prop] === '1' ? '出库' : scope.row[col.prop] === '2' ? '入库' : '' }}
					</template>
				</template>
			</el-table-column>
		</template>
	</table-layout>
</template>
<script setup lang="tsx" name="batchFlowList">
const thList = reactive([
	{ name: '操作时间', prop: 'createTimestamp', width: '160' },
	{ name: '操作人', prop: 'createBy', width: '100' },
	{ name: '仓库批次号', prop: 'inventoryBatchCode', width: '120' },
	{ name: '出入库类型', prop: 'inOutType', width: '140' },
	{ name: '出/入库单号', prop: 'inOutCode', width: '150' },
	{ name: '业务类型', prop: 'busType', width: '190' },
	// { name: '业务单据号', prop: 'goodAvailableQty', width: '150' },
	{ name: '良品可用量', prop: 'goodAvailableQty', width: '150' },
	{ name: '次品可用量', prop: 'defectiveUsageQty', width: '150' },
	{ name: '初始批次号', prop: 'startBatchCode', width: '150' },
	{ name: '采购单号', prop: 'purchaseOrderCode', width: '150' },
	{ name: '供应商', prop: 'supplierName', width: '150' },
]);
import { wmsInventoryBatchLog } from '/@/api/inventory/index';
const props = defineProps({
	queryForm: {
		type: Object,
		default: () => {
			return {};
		},
	},
	busTypesList: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
const toRefresh = () => {
	dataTableRef?.value.refresh();
};
const dataTableRef = ref();
onMounted(() => {
	toRefresh();
});

defineExpose({
	toRefresh,
});
</script>
<style lang="scss" scoped>
// .cell {
// 	div {
// 		display: flex;
// 		align-items: center;
// 	}
// }
</style>
